<template>
  <uni-collapse style="">
    <!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
    <uni-collapse-item title-border="none" :border="false">
      <template v-slot:title>
        <el-form
          :inline="true"
          :model="formData"
          class="form-center"
          style="line-height:100%;display:flex;"
        >
          <el-form-item
            style="width:200px;"
            :label="metaItem.label"
            v-for="metaItem in interceptDefaultShowItemMetaList"
            :key="metaItem.key"
          >
            <DimensionItemContent
              :meta-item="metaItem"
              :common-attr="commonAttr"
              :form-data="formData"
            ></DimensionItemContent>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                :icon="RefreshLeft"
                @click="onReset"
              ></el-button>
              <slot name="searchBtn"></slot>
            </el-button-group>
          </el-form-item>
        </el-form>
      </template>
      <view class="content">
        <el-form :inline="false" :model="formData" class="demo-form-inline">
          <el-form-item
            :label="metaItem.label"
            v-for="metaItem in interceptOtherItemMetaList"
            :key="metaItem.key"
          >
            <DimensionItemContent
              :meta-item="metaItem"
              :common-attr="commonAttr"
              :form-data="formData"
            ></DimensionItemContent>
          </el-form-item>
          <!-- <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                :icon="RefreshLeft"
                @click="onReset"
              ></el-button>
              <slot name="searchBtn"></slot>
            </el-button-group>
          </el-form-item> -->
        </el-form>
      </view>
    </uni-collapse-item>
  </uni-collapse>
</template>
<script setup>
import { computed } from "vue";
import { RefreshLeft } from "@element-plus/icons-vue";
import DimensionItemContent from "@gd-accbuild-ui/dimension-ui/dimension-item-content/dimension-item-content.vue";
import useSearchForm from "../../hooks/useSearchForm";
const props = defineProps({
  commonAttr: {
    type: Object,
  },
  formItemMetaList: {
    type: Array,
  },
  formData: {
    type: Object,
  },
});
const { onReset } = useSearchForm(props);
const defaultShowItemNum = computed(() => {
  return props.commonAttr?.defaultShowItemNum ?? 1;
});
const interceptDefaultShowItemMetaList = computed(() =>
  props.formItemMetaList.filter(
    (meta, metaIdx) => metaIdx + 1 <= defaultShowItemNum.value
  )
);
const interceptOtherItemMetaList = computed(() =>
  props.formItemMetaList.filter(
    (meta, metaIdx) => metaIdx + 1 > defaultShowItemNum.value
  )
);
</script>
<style lang="scss" scoped>
.form-center {
  /* line-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center; */
}
.form-center :deep(.el-form-item) {
  //line-height: 50px;
  /* display: flex;
  align-items: center;
  align-content: center; */
  //min-height:50px;
  margin: auto;
}
</style>
